<template>
  <div>
    <vxe-toolbar class="vxe-toolbar">
      <template #buttons>
        <vxe-input
          v-model="filterOption.fileName"
          type="search"
          placeholder="请输入文件名称"
          clearable
          @keyup="searchEvent"
          @clear="clearName"
        />
        <vxe-input
          v-model="filterOption.startTime"
          type="date"
          placeholder="请选择起始时间"
          class="time-button"
          clearable
        /> 
        <p class="interval-p"> ~ </p>
        <vxe-input
          v-model="filterOption.endTime"
          clearable
          type="date"
          placeholder="请选择截止时间"
        />
        <vxe-button 
          status="primary" 
          content="查询" 
          class="search-button"
          @click="timeSearch(filterOption)"
        />
        <vxe-button
          status="success"
          content="上传"
          class="upload-button"
          @click="uploadFile(false)"
        />
        <vxe-button
          status="danger"
          content="批量删除"
          class="delete-all-button"
          @click="deleteAll"
        />
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      round
      :checkbox-config="{ labelField: 'listId' }"
      :data="list"
      :loading="loading"
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
      :keep-source="true"
      class="mytable-scrollbar"
      @edit-closed="saveEdit"
      @checkbox-change="selectChangeEvent"
      @checkbox-all="selectChangeEvent"
    >
      <vxe-column
        type="checkbox"
        title="序号"
        width="120"
        fixed="left"
      />
      <vxe-column
        field="fileName"
        title="文件"
        width="240"
        type="html"
        fixed="left"
      />
      <vxe-column
        field="uploadTime"
        title="上传时间"
        width="180"
        :filters="[
          { data: '', label: '起:' },
          { data: '', label: '止:' }
        ]"
        :filter-method="customDateFilterMethod"
      >
        <template #filter="{ $panel, column }"> 
          <template v-for="(option, i) in column.filters" :key="i">
            <div class="uploadtime-style">
              <span class="time-span">{{ option.label }}</span>
              <vxe-input
                v-model="option.data"
                type="date"
                placeholder="请选择"
                transfer
                clearable
                @input="$panel.changeOption($event, !!option.data, option)"
              />
            </div>
          </template>
        </template>
      </vxe-column>
      <vxe-column
        field="fileType"
        title="文件类型"
        width="150"
        :filters="[{data:''}]"
        :edit-render="{ name: '$select' }"
      >
        <template #default="{ row }">
          <span>{{ formatFiletype(row.fileType) }}</span>
        </template>
        <template #edit="{ row }">
          <select v-model="row.fileType" class="select-style" transfer>
            <option
              v-for="(item,index) in filetypeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </select>
        </template>
      </vxe-column>
      <vxe-column
        field="dataOrganization"
        title="IQ数据组织方式"
        width="190"
        :filters="[{data:''}]"
        :edit-render="{ name: '$select' }"
      >
        <template #default="{ row }">
          <span>{{ formatDataorganization(row.dataOrganization) }}</span>
        </template>
        <template #edit="{ row }">
          <select v-model="row.dataOrganization" class="select-style" transfer>
            <option
              v-for="(item,index) in dataorganizationList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </select>
        </template>
      </vxe-column>
      <vxe-column
        field="dataType"
        title="IQ数据类型"
        width="170"
        :filters="[{data:''}]"
        :edit-render="{ name: '$select' }"
      >
        <template #default="{ row }">
          <span>{{ formatIQDatatype(row.dataType) }}</span>
        </template>
        <template #edit="{ row }">
          <select v-model="row.dataType" class="select-style" transfer>
            <option
              v-for="(item,index) in datatypeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </select>
        </template>
      </vxe-column>
      <vxe-column
        field="debugMode"
        title="调制方式"
        width="140"
        :filters="[{data:''}]"
        :edit-render="{ name: '$select' }"
      >
        <template #default="{ row }">
          <span>{{ formatDebugmode(row.debugMode) }}</span>
        </template>
        <template #edit="{ row }">
          <select v-model="row.debugMode" class="select-style" transfer>
            <option
              v-for="(item,index) in debugmodeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </select>
        </template>
      </vxe-column>
      <vxe-column
        field="startOffset"
        title="IQ数据起始字节"
        width="160"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <input
            v-model="row.startOffset"
            class="input-name"
            type="text"
            maxlength="15"
            @input=" row.startOffset = row.startOffset.replace(/[^/0/1/2/3/4/5/6/7/8/9/]/ig,'')"
          >
        </template>
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="cutoffLength"
        title="文件末尾截断字节数"
        width="200"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <input
            v-model="row.cutoffLength"
            class="input-name"
            type="text"
            maxlength="15"
            @input=" row.cutoffLength = row.cutoffLength.replace(/[^/0/1/2/3/4/5/6/7/8/9/]/ig,'')"
          >
        </template>
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="centerFreqIn"
        title="中心频率"
        width="140"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <input
            v-model="row.centerFreqIn"
            class="input-name"
            type="text"
            maxlength="15"
            @input=" row.centerFreqIn = row.centerFreqIn.replace(/[^/0/1/2/3/4/5/6/7/8/9/./,/，/k/K/H/h/Z/z/M/m/G/g/]/ig,'')"
            @blur="showData(row.centerFreqIn)"
          >
        </template>
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="intermediateFrequencyBandwidth"
        title="中频带宽"
        width="140"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
        <template #edit="{ row }">
          <input
            v-model="row.intermediateFrequencyBandwidth"
            type="text"
            class="input-name"
            @blur="showData(row.intermediateFrequencyBandwidth)"
            @input=" row.intermediateFrequencyBandwidth = row.intermediateFrequencyBandwidth.replace(/[^/0/1/2/3/4/5/6/7/8/9/./，/,/k/K/H/h/Z/z/M/m/G/g/]/ig,'')"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="samplingRate"
        title="采样率"
        width="120"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <input
            v-model="row.samplingRate"
            class="input-name"
            type="text"
            @blur="showData(row.samplingRate)"
            @input=" row.samplingRate = row.samplingRate.replace(/[^/0/1/2/3/4/5/6/7/8/9/./,/，/k/K/H/h/Z/z/M/m/G/g/]/ig,'')"
          >
        </template>
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="bitRate"
        title="码速率"
        width="120"
        :filters="[{ data: '' }]"
        :filter-method="fliterData"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <input
            v-model="row.bitRate"
            type="text"
            class="input-name"
            @blur="showData(row.bitRate)"
            @input=" row.bitRate = row.bitRate.replace(/[^/0/1/2/3/4/5/6/7/8/9/./,/，/k/K/H/h/Z/z/M/m/G/g/]/ig,'')"
          >
        </template>
        <template #filter="{ $panel, column }">
          <input
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            type="type"
            @input="$panel.changeOption($event, !!option.data, option)"
          >
        </template>
      </vxe-column>
      <vxe-column
        field="操作"
        title="操作"
        width="260"
        fixed="right"
      >
        <template #default="{ row }">
          <vxe-button
            class="drow-button-style"
            status="primary"
            content="分析"
            @click="goAnalyseView(row)"
          />
          <vxe-button status="primary" content="下载" @click="downfile(row)" />
          <vxe-button status="primary" content="删除" @click="deleteCurrentLine(row)" />
        </template>
      </vxe-column>
    </vxe-table>
    <Popup :message="childValue" :debugmodemessage="debugmodeMessage" @childcLick="closeModal" />
    <!-- 分页 -->
    <p>
      <vxe-pager
        v-model:current-page="curPage"
        v-model:page-size="size"
        class="vxe-page"
        perfect
        :total="total"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        :layouts="[ 'PrevJump', 'PrevPage', 'Number', 'NextPage','NextJump', 'Sizes', 'FullJump','Total',]"
      />
    </p>
  </div>
</template>
<script setup>
  import * as mtApi from '@/api/singalManage'
  import {displayUnitConversion, showData, fliterData, customDateFilterMethod,downfile} from '@/api/tool/filemanage'
  import Popup  from "@/components/Popup"
  import { onMounted, ref, reactive } from 'vue'
  import useChartsStore from '@/store/modules/charts'
  import useDictStore from '@/store/modules/dict'
  import { useRouter } from 'vue-router'
  import useList from '@/api/tool/filemanage/tableFunciton'
  import { allSignalListGet } from '@/api/singalManage'
  const filterOption = ref({});
  const fileId = ref(0)
  const xTable = ref(null)
  const {list,loading,curPage,size,total,loadData,timeSearch,deleteCurrentLine,deleteAll,selectChangeEvent,saveEdit} = useList(allSignalListGet,filterOption,fileId,xTable);
  const router = useRouter()
  const debugmodeMessage = ref([])
  const childValue = ref(false)
  const filetypeList = ref([])
  const dataorganizationList = ref([])
  const datatypeList = ref([])
  const debugmodeList = ref([])
  const file = reactive({
    filename: ''
  })
  onMounted(() => {
    getDictionaryData()
  })
  const closeModal = (status) =>{
    childValue.value = status
    loadData()
  }
  
  //获取字典数据 
  const getDictionaryData = () =>{
    const store = useDictStore()
    //获取文件类型
    mtApi.signalDataGet({dictType:"filetype"}).then( res =>{
      const filetype = store.dict.filter(item => item.dictType == "filetype" )
      filetype.forEach(item=>{
        filetypeList.value.push({label:item.dictLabel,value:item.dictValue})
      })
      filetypeList.value.sort((a, b) => {
        const valueA = parseInt(a.value);
        const valueB = parseInt(b.value);
        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });
      const $table = xTable.value
      const filetypecolumn = $table.getColumnByField('fileType')
      if (filetypecolumn) {
        // 修改筛选列表，并默认设置为选中状态 
        $table.setFilter(filetypecolumn,filetypeList.value)
        // 修改条件之后，需要手动调用 updateData 处理表格数据
        $table.updateData()
      }
    })
    //获取IQ数据组织方式
    mtApi.signalDataGet({dictType:"data_organization"}).then( res =>{
      res.data.forEach((item,index)=>{
        dataorganizationList.value.push({label:item,value:String(index)})
      })
      const $table = xTable.value
      const dataorganizationcolumn = $table.getColumnByField('dataOrganization')
      if (dataorganizationcolumn) {
        $table.setFilter(dataorganizationcolumn,dataorganizationList.value)
        $table.updateData()
      }
    })
    //获取IQ数据类型
    mtApi.signalDataGet({dictType:"data_type"}).then( res =>{
      res.data.forEach((item,index)=>{
        datatypeList.value.push({label:item,value:String(index)})
      })
      const $table = xTable.value
      const datatypecolumn = $table.getColumnByField('dataType')
      if (datatypecolumn) {
        $table.setFilter(datatypecolumn,datatypeList.value)
        $table.updateData()
      }
    })
    //获取调制方式
    mtApi.signalDataGet({dictType:"debug_mode"}).then( res =>{
      const debugmode = store.dict.filter(item => item.dictType == "debug_mode" )
      debugmode.forEach(item=>{
        debugmodeList.value.push({label:item.dictLabel,value:item.dictValue})
      })
      debugmodeList.value.sort((a, b) => {
        const valueA = parseInt(a.value);
        const valueB = parseInt(b.value);
        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });
      debugmodeMessage.value = debugmodeList.value 
      const $table = xTable.value
      const debugmodecolumn = $table.getColumnByField('debugMode')
      if (debugmodecolumn) {
        $table.setFilter(debugmodecolumn,debugmodeList.value)
        $table.updateData()
      }
    })
  }
  const chartsStore = useChartsStore()
  // 跳到分析页面  
  const goAnalyseView = (row) => {
    chartsStore.setFileInfo(transToStore(row), '0')
    router.push({
      name: 'SignalAnalyse',
    })
  }
  // 缓存文件数据转化  
  const transToStore = (row) => {
    const result = {}
    const requiredKeys = [
      'samplingRate', 
      'bitRate',
      'centerFreqIn',
      'dataType',
      'debugMode',
      'fftSize',
      'fileType',
      'intermediateFrequencyBandwidth',
      'uploadTime',
      'iqReverse',
      'logarithm',
      'startOffset',
      'cutoffLength'
    ]
    Object.keys(row).forEach(key => {
      if (!requiredKeys.includes(key)) {
        return
      }
      if (typeof row[key] === 'string' && row[key].includes('Hz')) {
        result[key] = displayUnitConversion(row[key])
      } else {
        result[key] = row[key]
      }
    })
    result.fileName = row.fileName
    return result
  }
  //上传文件  
  const uploadFile = () => {
    childValue.value = true
  }
  // 全局搜索方法  
  const searchEvent = (value) => {
    file.filename = value.$input.props.modelValue
  }
  const clearName = () => {
    file.filename = ""
  }
  // IQ数据组织方式 
  const formatDataorganization = value => {
    let txtArr = dataorganizationList.value.filter(item => {
      return value == item.value || value == item.label
    })
    return txtArr.length > 0 ? txtArr[0].label : ''
  }
  // 文件类型  
  const formatFiletype = value => {
    let txtArr = filetypeList.value.filter(item => {
      return value == item.value || value == item.label
    })
    return txtArr.length > 0 ? txtArr[0].label : ''
  }
  // IQ数据类型
  const formatIQDatatype = value => {
    let txtArr = datatypeList.value.filter(item => {
      return value == item.value || value == item.label
    })
    return txtArr.length > 0 ? txtArr[0].label : ''
  }
  // 调制方式
  const formatDebugmode = value => {
    let txtArr = debugmodeList.value.filter(item => {
      return value == item.value || value == item.label
    })
    return txtArr.length > 0 ? txtArr[0].label : ''
  }
</script>
<style lang="less" scoped>
  
  .time-button {
    margin: 0 20px;
  }
  .interval-p{
    margin: 0 16px 0 0;
  }
  .search-button{
    margin: 0 0 0 20px;
  }
  .upload-button {
    margin: 0 0 0 20px;
  }
  .delete-all-button{
    margin: 0 0 0 20px;
  }

  .nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home {
    background-color: none;
    padding: 0;
  }

  .exp-list {
    margin-bottom: 10px;

    .project-desc {
      height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: pre-line;
      margin-bottom: 10px;
      font-size: 14px;
    }

    li {
      font-size: 12px;
      display: flex;
      color: #aaa;
      text-align: right;

      span {
        float: left;
        margin-right: 2em;
        color: #888;
        text-align: right;
      }

      & > div {
        flex: 1;
      }
    }
  }
 
  .uploadtime-style{
    display: flex
  }
  .time-span{
    line-height: 42px; margin-right: 5px; margin-left: 10px
  }
  /* 增加筛选颜色 */
  .keyword-lighten {
    color: #000;
    background-color: #ffff00;
  }
  .input-name{
    width: 100%;
    height: 34px;
    border-radius: 4px;
    outline: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    padding: 0 .6em;
    color: var(--chart-text-color);
    border: 1px solid #dcdfe6;
    background-color:var(--background-color);
    box-shadow: none;
  }
.select-style{
  background-color: var(--background-color);
  border: 1px solid var(--chart-text-color);
  border-radius: 4px;
  padding: 8px;
  color: var(--chart-text-color);
  width: 100%;
  cursor: pointer;
}
:deep(.vxe-table--filter-wrapper .vxe-table--filter-body > li:hover){
  background-color: var(--scrollbar-color) !important;
  border: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-table--filter-wrapper .vxe-table--filter-header > li:hover){
  background-color: var(--scrollbar-color) !important;
  border: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-table--filter-wrapper){
  background-color: var(--background-color) !important;
  border: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-select-option--wrapper){
  background-color: var(--background-color) !important;
  border: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}

:deep(.vxe-table--body){
  width: 100% !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-table--header){
  width: 100% !important;
}
:deep(.vxe-pager--goto){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-pager--num-btn){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-pager--next-btn){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-pager--jump-next){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-pager--jump-prev){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-pager--prev-btn){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-input--inner){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
:deep(.vxe-table--header-wrapper){
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
.vxe-toolbar{
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
.vxe-page{
  background-color: var(--background-color) !important;
  color: var(--chart-text-color) !important;
}
.mytable-scrollbar {
  background-color: var(--background-color);
  color: var(--chart-text-color) !important;
  border: 1px solid var(--background-color) !important;
}
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track-piece{
  background-color: var(--background-color);
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: var(--chart-text-color);
  border-radius: 5px;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: var(--chart-text-color);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: var(--chart-text-color);
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: var(--background-color);
}
</style>






